<template>
	<view class="flex-column h100 w100">
		<uni-nav-bar style="z-index:999;" left-icon="left" @clickLeft="gobacks" title="添加朋友" :fixed="true"
			:statusBar='!isWin'></uni-nav-bar>
		<view style="height: 80rpx;width: 100%;padding: 10rpx 10rpx;position: sticky;">
			<u-search placeholder="请输入用户名" :showAction="true" @custom="search" actionText="搜索" v-model="val"
				:clearabled="true"></u-search>
		</view>
		<view style="margin-top: -6rpx;padding: 20rpx 20rpx;background-color: #fff;overflow-y: scroll;"
			class="flex-column row-gap-10 fixed top">
			<view v-for="(item, index) in usersList" class="flex" style="align-items: center;column-gap: 20rpx;"
				:key="item.id" @click="confirm(index)">
				<u-avatar shape="circle" :src="transPic(item.avatar)"></u-avatar>
				<view>{{ item.username }}</view>
				<!-- 				<view class='small-font'>{{item.address}}</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import Config from "@/common/config.js"
import { searchFriend } from "@/api/app/api"
export default {
	name: "search",
	data() {
		return {
			val: '',
			usersList: [],
			page: 0
		}
	},
	onLoad() {
		let info = wx.getSystemInfoSync();
		console.log(info);
	},
	methods: {
		gobacks() {
			wx.navigateBack();
		},
		transPic(val) {
			return Config.cloud_url + val;
		},
		search() {
			searchFriend({
				name: this.val,
				page: this.page
			}).then(res => {
				console.log(res)
				this.usersList.splice(0);
				this.usersList.push(...res.data);
			}).catch(err => {
				console.log(err)
			})
		},
		confirm(_index) {
			wx.navigateTo({
				url: '/pages/personal/personal-search?search=1',
				success: (res) => {
					res.eventChannel.emit('acceptData', {
						data: this.usersList[_index]
					})
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.large-font {
	font-size: 1.5rem;
	font-weight: 700;
}

.middle-font {
	font-size: 1.1rem;
}

.small-font {
	font-size: 0.7rem;
	font-weight: 200;
}

.top {
	top: calc(160rpx + var(--status-bar-height));
}
</style>